import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  state = {
    tN: '',
  }
  updateHandle = (e) => {
    // console.log(e.target.checked)
    // 要将id传递给App
    // this.props.todo.id
    this.props.updateTodo(this.props.todo.id)
  }

  delHandle = () => {
    this.props.delTodo(this.props.todo.id)
  }
  render() {
    const { tN } = this.state
    const {
      todo: { todoName, id, isDone },
      id: editId, //由于名字重复,所有重命名为editId
      updateEditId,
      editTodoName,
    } = this.props
    return (
      <li>
        {editId !== id ? (
          <label>
            <input
              type="checkbox"
              checked={isDone}
              onChange={this.updateHandle}
            />
            <span className={isDone ? 'done' : ''}>{todoName}</span>
          </label>
        ) : (
          <input
            type="text"
            className="editInp"
            // 文本框中展示什么数据,有状态tN决定
            value={this.state.tN}
            // 让用户可以在文本框中正常输入数据
            onChange={(e) => {
              this.setState({
                tN: e.target.value.trim(),
              })
            }}
            onKeyDown={(e) => {
              if (e.key !== 'Enter' || !tN) return
              editTodoName(tN)
            }}
          />
        )}
        <button className="btn btn-danger" onClick={this.delHandle}>
          删除
        </button>
        <button
          className="btn btn-edit"
          onClick={() => {
            // 修改app中的editId
            updateEditId(editId !== id ? id : undefined)
            // 将当前数据的任务名添加到tN中,tN是什么,则文本框中就渲染什么
            this.setState({
              tN: todoName,
            })
          }}
        >
          {editId !== id ? '编辑' : '取消'}
        </button>
      </li>
    )
  }
}
